<template>
    <div class="box">
     <img :src="item.url[0]" alt="" class="header-img">
     <div class="content">
        <div class="content-map">
            <div class="content-map-name">{{ item.name }}</div>
            <div class="content-map-tag">
                <span v-for="item in item.label" :key="item">{{ item }}</span>
            </div>
            <div class="content-map-footer">
            <div class="time"><img src="../assets/time.png" alt=""><span>{{ item.businessHours }}</span></div>
                <div class="address"><img src="../assets/address.png" alt="">{{ item.address }}</div>
            </div>
        </div>
       <div class="content-text">
        <div class="content-text-title"><span>店铺详情</span></div>
       <div class="content-text-html" v-html="item.content"></div>
       </div>
     </div>
    </div>
  </template>

  <script setup>
  //导入当前路由api
  import{ useRoute} from'vue-router';
  import data from '../data';
  //实例化当前路由
  const route  =useRoute()
  //获取路由传参
  const id = route.query?.id
  //根据id获取点击对象
  const item = data.find(i => i.id == id)
  console.log(id,data,'id')
  console.log(item,'item')
</script>

<style scoped lang="scss">
.box{
    background-color: #f1f4f9;
    .header-img{
        width: 100%;
        mask-image: linear-gradient(to bottom, #ffffff,rgba(255,255,255,0.9),rgba(255,255,255,0));   
     }
     .content{
        padding: 9px 16px;
        margin-top: -332px;
        position: relative;

        >div{
            border-radius: 10px;
            background-color: #fff;
        }
        >div:first-child{
            margin-bottom: 10px;
        }
        .content-map{
            padding: 14px 10px;

            .content-map-name{
                font-size:20px;
                font-weight: bold;
            }
            
            .content-map-tag{
                margin-top: 6px;

                span{
                    background-color: #ededed;
                    font-size: 12px;
                    margin-right: 6px;
                }
            }

            .content-map-footer{
                height: 100px;
                background: url("http://wddxwdc.tffcs.com/image/dxkfr/whxd/map.png");
                padding: 25px 20px;
                margin: 10px;

                img{
                    margin-right: 6px;
                }
            }
        }

        .content-text{
            padding: 26px 0;

            .content-text-title{
                display: flex;
                justify-content: center;
                margin-bottom: 20px;

                span{
                    padding: 6px 26px;
                    background: linear-gradient(180deg,#ffedd1 0%, rgba(255,255,255,0) 100%);
                    color: #784e23;
                    font-weight: bold;
                    border-radius: 5px;
              }
            }
            :deep(p){
                color:  #784e23;
            }
        }
     }
}
</style>